<template>
    <MenuPage>
        <template slot="title">
          <div class="tab-title-estu">
            <div :class="{ act: tabsOne }" @click="handleSwitch('one')" class="tabs">
                {{ pageTitle }}
            </div>
<!--          19344 感觉和这里毫不相关，为什么要注释 锚定分享查询 菜单？？/-->
<!--          story-view-1909 放开这个菜单-->
            <!--bug 19343 注释-->
            <div :class="{ act: tabsTwo }" @click="handleSwitch('two')" class="tabs">
                锚定分享查询
            </div>
          </div>
        </template>
        <template slot="search">
            <div
                  v-show="tabsOne"
              >

<!--                  <Divider type="vertical" style="margin: 10px 0px 10px 10px" />-->
                  <Input
                      v-model.trim="queryTerms.userAccount"
                      placeholder="用户名"
                      :maxlength="20"
                      @on-change="changePage(1)"
                      clearable
                      style="width: 180px; margin-left: 15px"
                  ></Input>
                  <Input
                      v-model.trim="queryTerms.userName"
                      placeholder="昵称"
                      :maxlength="20"
                      @on-change="changePage(1)"
                      clearable
                      style="width: 180px; margin-left: 15px"
                  ></Input>
              <Button type="primary" ghost icon="md-add" @click="showDrawerBtn" style="margin-left: 15px;"
              >添加优秀学员</Button
              >
                  <Button
                      class="header-btn"
                      type="primary"
                      ghost
                      style="height: 32px; margin-left: 5px"
                      @click="refreshIcon()"
                      ><i class="el-icon-refresh-right"
                  /></Button>
              </div>
              <div
                  v-show="tabsTwo"
              >
            <Input
                v-model.trim="shareQuery.name"
                placeholder="用户名"
                :maxlength="20"
                @on-change="handleShareQuery"
                clearable
                style="width: 180px; margin-left: 15px"
            ></Input>
              </div>
        </template>
        <template slot="content">
            <TableList 
            v-show="tabsOne"
            :data="dataList" 
            :columns="userColumns"
            :page.sync="query.pageIndex"
            :size.sync="query.pageSize"
            :total="totalCount"
            @queryFun="getDataList">
          </TableList>
          <TableList 
            v-show="tabsTwo"
            :data="shareList"
            :columns="videoCol"
            :loading="tableLoading"
            :page.sync="shareQuery.pageIndex"
            :size.sync="shareQuery.pageSize"
            :total="totalShareCount"
            @change-page="changeSharePage"
            @change-size="changShareSize">
          </TableList>
    </template>
      <DrawerPage 
        width="800" 
        v-model="learnNoteModal.show" 
        @on-visible-change="learnNoteCLose"
        :page.sync="learnNoteQuery.pageIndex"
        :size.sync="learnNoteQuery.pageSize"
        :columns="learnNoteModal.columns"
        :data="learnNoteModal.list"
        :total="learnNoteModal.total"
        selectKey="selectId"
        selectName="name"
        showSelectTag
        :selection.sync="multipleList"
        @change-page="changeModalPage"
        @change-size="changeModalSize"
      >
          <p slot="header" style="display: flex; justify-content: space-between; height: 30px">
              <span>{{ learnNoteModal.title }}</span>
              <Button
                  type="info"
                  style="margin-right: 30px; width: 50px; height: 30px"
                  size="small"
                  @click="noteShareModal('list')"
                  :disabled="multipleList.length == 0"
                  >分享</Button
              >
          </p>
      </DrawerPage>
      <DrawerPage
          :closable="true"
          @on-close="noteShareModalClose"
          width="900"
          :title="drawer.title"
          v-model="drawer.show"
          class="deviceDrawer"
      >
        <p slot="header" style="display: flex; justify-content: space-between; height: 30px">
              <span>{{ drawer.title }}</span>
              <Button
                  type="info"
                  style="margin-right: 30px; width: 50px; height: 30px"
                  size="small"
                  @click="noteShareModal('content')"
                  :disabled="multipleContent.length == 0"
                  >分享</Button
              >
          </p>
          <div v-if="drawer.list.length > 0" class="noteList">
              <ul>
                  <li v-for="n in drawer.list" :key="n.id">
                    <div>
                        <Checkbox v-model="n._checked" :disabled="n._disabled" @on-change="(val)=>checkChange(val,n)">分享内容</Checkbox>
                    </div>
                      <div style="display:flex;justify-content:space-between">
                        <h4 :title="n.title" class="achorTitle" style="width:90%">{{ n.title }}</h4>
                        <span  class="timestamp"><Icon type="md-flag" />
                            {{timestampToString(n.noteFlag.currentTime)}}
                        </span>
                      </div>

                      <!-- <div class="showArea">   
                          <section>
                              <img :src="avatar"/>
                              <span>{{n.creatorName}}</span>
                          </section>
                          <span v-if="n.imageUrl" class="timestamp" >
                          <Icon type="md-flag" />
                          {{timestampToString(n.currentTime)}}</span>
                      </div> -->
                      <div class="noteArea">
                          <quill-editor
                              v-model="n.content"
                              @focus="onEditorFocus($event)"
                              class="editorShow"
                              :options="preOption"
                          ></quill-editor>
                      </div>
                      <span
                          style="
                              display: inline-block;
                              width: 100%;
                              text-align: right;
                              margin: 6px 0 20px 0;
                          "
                          >{{ handerTimeDiff(n.createTime) }}</span
                      >
                  </li>
              </ul>
          </div>
          <div v-show="drawer.list.length === 0" class="defGraphWrap">
              <div class="defGraph"></div>
              <div class="graphText">暂无信息</div>
          </div>
      </DrawerPage>
       <DrawerPage
          width="700"
          title="分享"
          v-model="noteShareMoal"
          @on-close="closeShareModel"
          :columns="shareMemcol"
          :data="shareMemList"
          :page.sync="noteShareMemPage"
          :total="noteShareMemTotal"
          :size.sync="noteShareMemSize"
          @queryFun="queryMember"
      >
          <template slot="search">
            <Input
              v-model.trim="noteShareMemInput"
              placeholder="用户名"
              style="width: 150px; margin-right: 15px"
              clearable
              @on-change="addSearchComMem"
            />
            <Input
              v-model.trim="noteShareMemUserAccountInput"
              placeholder="昵称"
              style="width: 150px; margin-right: 15px"
              clearable
              @on-change="addSearchComMem"
            />
          </template>
          <!-- <Table
              style="margin-top: 30px"
              border
              :columns="shareMemcol"
              :data="shareMemList"
          ></Table>
          <Page
              :current="noteShareMemPage"
              :total="noteShareMemTotal"
              :page-size="noteShareMemSize"
              show-total
              show-elevator
              @on-change="noteShareMemChange"
          /> -->
          <!-- :max-height="setUserTableHei"
          @on-select="selectSignal"
          @on-select-cancel="cancelSelectSignal"
          @on-select-all="selectAll"
          @on-select-all-cancel="cancelSelectAll" -->
      </DrawerPage>
      <Modal
          :closable="true"
          :mask-closable="false"
          width="1000"
          v-model="addDeviceModel"
          @on-visible-change="changeModalStatus"
          title="添加优秀学员"
          :footer-hide="true"
      >
          <div style="display: flex; justify-content: flex-end; margin-top: 15px">
              <Input
                  v-model.trim="studentQuery.userName"
                  placeholder="昵称"
                  style="width: 150px; margin-right: 15px"
                  clearable
                  @on-change="getStudentList(1)"
              />
              <Button title="重置" @click="refreshAddGroupList"
                  ><i class="el-icon-refresh-right"
              /></Button>
          </div>
          <div>
              <div class="tag-wrap-div">
                  <Tag
                      v-for="item in getAddMemIdArr"
                      :key="item"
                      :name="item"
                      closable
                      type='border'
                      color="var(--url-color)"
                      @on-close="handleClose2"
                      >{{ handleTagName(item) }}</Tag
                  >
              </div>
              <Table
                  border
                  :columns="studentColumns"
                  :data="studentList"
                  @on-select="selectSignal"
                  @on-select-cancel="cancelSelectSignal"
                  @on-select-all="selectAll"
                  @on-select-all-cancel="cancelSelectAll"
              ></Table>
              <div class="table-bottom">
                  <div style="display: flex; justify-content: flex-start; align-items: center">
                      <Button
                          style="margin-right: 15px"
                          type="primary"
                          @click="addAssign"
                          :loading="submitAddMemLoading"
                          >添加</Button
                      >
                      <Button @click="addDeviceModel = false">取消</Button>
                  </div>
                  <Page
                      :current="studentQuery.pageIndex"
                      :total="studentTotal"
                      :page-size="studentQuery.pageSize"
                      show-total
                      show-elevator
                      @on-change="getStudentList"
                  />
              </div>
          </div>
      </Modal>
      <show-tree-detail ref="treeDetail"></show-tree-detail>
      <integral-detail
          ref="integralDetail"
          :drawerTitle="drawerTitle"
          :drawerUserId="drawerUserId"
      ></integral-detail>
      <ShareModal
          v-model="shareModal.show"
          :type="shareModal.type"
          :userId="shareModal.userId"
      ></ShareModal>

      <!-- <Modal
      v-model="shareModel"
      :footer-hide="true"
      title="锚定内容">
      <p style="word-wrap:break-word;">{{shareText}}</p>
  </Modal> -->
      <Drawer title="锚定分享用户" width="700" v-model="drawerVal" @on-close="handleDrawerClose">
          <Collapse v-model="sharePanel" accordion :on-change="handleShareFirstFloor">
              <Panel :name="String(index)" v-for="(item, index) in shareFirstFloor" :key="index">
                  接收者：{{ item.accepterUserName ? item.accepterUserName : '-' }}
                  {{ item.length }}
                  <div slot="content">
                      <div v-if="item.notesShareTos.length > 0">
                          <Collapse accordion v-model="shareSecondPanel">
                              <Panel
                                  :name="String(index + '1')"
                                  v-for="(secondItem, index) in item.notesShareTos"
                                  :key="index"
                              >
                                  {{
                                      secondItem.experimentName
                                          ? secondItem.experimentName
                                          : secondItem.videoName
                                          ? secondItem.videoName
                                          : '-'
                                  }}
                                  <div slot="content">
                                      <!-- <template> -->
                                          <!-- <div v-if="secondItem.notes.length > 1"> -->
                                              <Collapse v-if="secondItem.notes.length > 0" accordion v-model="shareThirdlyPanel" class="newClass">
                                                  <Panel :name="String(index + '2')">
                                                      锚定内容
                                                      <div
                                                          slot="content"
                                                          style="width: 100%; margin-bottom: 15px"
                                                          v-for="(
                                                              sItem, index
                                                          ) in secondItem.notes"
                                                          :key="index"
                                                      >
                                                      <div class="anchoring-tit">
                                                        <h4 style="color:#aaa;margin-bottom:10px">{{sItem.title}}</h4>
                                                        <span>{{sItem.content | filterTimeStamp}}</span>
                                                      </div>
                                                      <div class="noteArea">
                                                            <quill-editor
                                                                v-model="sItem.showContent"
                                                                @focus="onEditorFocus($event)"
                                                                class="editorShow"
                                                                :options="preOption"
                                                            ></quill-editor>
                                                        </div>
                                                        <span>{{ sItem.createTime }}</span>
                                                      </div>
                                                  </Panel>
                                              </Collapse>
                                          <!-- </div> -->
                                          <!-- <div v-else-if="secondItem.notes.length <= 1">
                                              <Collapse accordion v-model="shareThirdlyPanel">
                                                  <Panel :name="String(index + '2')">
                                                      锚定内容
                                                      <div
                                                          slot="content"
                                                          style="width: 100%"
                                                          v-for="(
                                                              sItem, index
                                                          ) in secondItem.notes"
                                                          :key="index"
                                                      >
                                                      {{sItem}}
                                                      <div class="anchoring-tit">
                                                        <h4 style="color:#aaa;margin-bottom:10px">{{sItem.title}}</h4>
                                                        <span>{{sItem.content | filterTimeStamp}}</span>
                                                      </div>
                                                          <div v-if="sItem.type == 1">
                                                              {{ sItem.content }}
                                                          </div>
                                                          <img
                                                              v-else
                                                              :src="
                                                                  sItem.content
                                                                      | filterAnchoringCon
                                                              "
                                                              alt=""
                                                              style="width: 100%; height: 300px"
                                                          />
                                                          <span>{{ sItem.createTime }}</span>
                                                      </div>
                                                  </Panel>
                                              </Collapse>
                                          </div> -->
                                          <div v-else class="defGraphWrap">
                                              <div class="defGraph"></div>
                                              <div class="graphText">暂无信息</div>
                                          </div>
                                      <!-- </template> -->
                                  </div>
                              </Panel>
                          </Collapse>
                      </div>
                      <div v-else class="defGraphWrap">
                          <div class="defGraph"></div>
                          <div class="graphText">暂无信息</div>
                      </div>
                  </div>
              </Panel>
          </Collapse>
      </Drawer>
    
</MenuPage>
</template>
<script>
import encryption from '@/libs/encryption.js';
import { timestampToString } from '@/libs/utils'
import {
  addExcellentStudent,
  deleteExcellentStudent,
  getStudentList,
  getLearnNoteList,
  getIntegralList,
  getMedalList,
  shareNote,
  cancelShareNote,
  batchShareNote,
  queryShareList,
  querYanchoringShareList,
  shareCanClick
} from '@/api/excellentStudent';
import { addByExcellentUser } from '@/api/selfStudy/skill';
import { Base64 } from 'js-base64';
//编辑器以及样式引入
import Quill from 'quill';
import { quillEditor } from 'vue-quill-editor'; // 调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import Moment from 'moment';
import ShowTreeDetail from '@/view/experimentalScene/skillTree/showTreeDetail.vue';
import IntegralDetail from '@/components/integral-detail';
import ShareModal from './shareModal.vue';
import { getExperOfCompany } from '@/api/company.js';
import {mapGetters, mapState} from "vuex";
export default {
  components: {
      quillEditor,
      ShowTreeDetail,
      IntegralDetail,
      ShareModal,
  },
  data() {
      let September = sessionStorage.getItem('November');
      September = JSON.parse(encryption.SelfUseDecrypt(September));
      return {
        creatorName: '',
        accepterName: '',
        shareUserName: September.userName,
          medal1: require('./integral-new/medal-0.png'),
          medal2: require('./integral-new/medal-1.png'),
          medal3: require('./integral-new/medal-2.png'),
          medal4: require('./integral-new/medal-3.png'),
          medal5: require('./integral-new/medal-4.png'),
          medal6: require('./integral-new/medal-5.png'),
          medal7: require('./integral-new/medal-6.png'),
          medal8: require('./integral-new/medal-7.png'),
          medal9: require('./integral-new/medal-8.png'),
          medal10: require('./integral-new/medal-8.png'),
          noteShareMoal: false,
          noteShareMemPage: 1,
          noteShareMemSize: 10,
          noteShareMemInput: '',
          noteShareMemUserAccountInput: '',
          noteShareMemTotal: 0,
          accepterList: [],
          accepterIdList: [],
          preOption: {
              modules: {
                  toolbar: false,
              },
          },
          drawer: {
              show: false,
              list: [],
              title: '',
          },
          USER_ID: September.userId,
          isRootDesigner: September.isRootDesigner,
          query: {
              pageIndex: 1,
              pageSize: 10,
          },
          queryTerms: {},
          studentQuery: {
              // 查询普通学员的搜索条件
              pageIndex: 1,
              pageSize: 10,
              //userName: "",
              //outstanding: false,
          },
          dataList: [],
          userColumns:[{
            title:"用户名",
            key:'userAccount',
            tooltip:true,
            },{
            title:"昵称",
            key:'userName',
            tooltip:true,
            },{
            type:'Tag',
            title:"积分总分",
            key:'score',
            },{
            title:"用户勋章",
            key:'medalNum',
            render:(h,params) => {
                return !params.row.medalNum || params.row.medalNum === 0 ? h('span','新手') : 
                h('Tooltip',{
                    props:{
                        content:this.$options.filters.medalNumFilter(1 || params.row.medalNum),
                        placement:"top-start",
                        maxWidth:400
                    }
                },[
                    h('img',{
                        attrs:{
                            src:this.getMedal(1 || params.row.medalNum)
                        },
                        style:{
                            height: '30px',
                            verticalAlign: 'middle'
                        }
                    })
                ])
            }

            },{
            title:"锚定内容",
            key:'inviterName',
            tooltip:true,
            render:(h,params) => {
                return h('Button',{
                    props:{
                        type:"info",
                        size:"small",
                        ghost:true,
                        icon:"ios-search"
                    },
                    attrs:{
                        title:params.row.inviterName
                    },
                    on:{
                        click:() => {
                            this.showAnchorModal(params.row, 3)
                        }
                    }
                })
            }
        },{
        title:"学习详情",
        key:'inviterName1',
        tooltip:true,
        render:(h,params) => {
            return h('Button',{
                props:{
                    type:"info",
                    size:"small",
                    ghost:true,
                    icon:"ios-search"
                },
                attrs:{
                    title:params.row.inviterName
                },
                on:{
                    click:() => {
                        this.showDrawer(params.row, 1)
                    }
                }
            })
        }
        },{
        title:'操作',
        key:'action',
        width:160,
        opList:[
            {
            txt:'生成技能树',
            title:'确定要生成技能树吗？',
            tooltip:true,
            show: (data) => {
                return this.skillTreeManageShow
            },
            disabled:this.setIsClick,
            on:{
                click:(data,e) => {
                    this.addByExcellentUser(data)
                }
            }

            },{
                txt:'删除',
                type:'delete',
                title:'确定要删除吗',
                tooltip:true,
                disabled:(item) => {
                    return item.creator !== this.USER_ID && !this.isRootDesigner
                },
                on:{
                    click:(data,e) => {
                        this.deleteExcellentStudent(data)
                    }
                }

            }]
        }],
          totalCount: 0,
          formValidate: {
              creator: this.USER_ID,
              name: '', //CVE编号
              useType: '', //事件描述
              eventType: '',
              file: {}, //镜像名称
              description: '', //可见范围
          },
          // 显示
          showDataList: true,
          showDefImg: false,
          learnNoteQuery: {
              pageIndex: 1,
              pageSize: 10,
              creator: '',
              userId: '',
          },
          learnNoteModal: {
              show: false,
              title: '',
              total: 0,
              list: [],
              columns: [],
          },
          studentList: [],
          studentColumns: [
              {
                  type: 'selection',
                  width: 60,
                  align: 'left',
                  render: (h, params) => {
                      return h('div', {
                          style: {
                              display: 'none',
                          },
                      });
                  },
              },
              {
                  title: '昵称',
                  key: 'userName',
                  tooltip: true,
              },
              {
                  title: '积分',
                  key: 'score',
                  tooltip: true,
              },
              {
                  title: '创建时间',
                  key: 'created',
                  tooltip: true,
              },
          ],
          studentTotal: 0,
          addDeviceModel: false,
          getAddMemIdArr: [],
          submitAddMemLoading: false,
          drawerTitle: '',
          drawerUserId: '',
          shareModal: {
              show: false,
              type: 'share',
              userId: '',
          },
          shareMemList: [],
          shareMemcol: [
              // {
              //     type: 'selection',
              //     width: 60,
              //     align: 'left',
              //     render: (h, params) => {
              //         return h('div', {
              //             style: {
              //                 display: 'none'
              //             }
              //         });
              //     }
              // },
              {
                  title: '用户名称',
                  key: 'username',
                  align: 'left',
              },
              {
                  title: '昵称',
                  key: 'nickname',
                  align: 'left',
              },
              {
                  title: '类型',
                  key: 'type',
                  align: 'left',
                  render: (h, params) => {
                      return h('span', this.setType(params.row));
                  },
              },
              // {
              //     title:'角色',
              //     key:'role',
              //     align:'left'
              // },
              {
                  title: '是否在线',
                  key: 'online',
                  align: 'left',
                  width: 90,
                  render: (h, params) => {
                      let text = '';
                      if (!params.row.online || params.row.online === 'false') {
                          text = 'default';
                      } else {
                          text = 'success';
                      }
                      return h(
                          'Tag',
                          {
                              props: {
                                  color: text,
                                  type: 'border',
                              },
                          },
                          this.isOnline(params.row.online).text
                      );
                  },
              },
              {
                  title: '操作',
                  key: 'action',
                  width: 160,
                  render: (h, params) => {
                      return h('div', [
                          h(
                              'Button',
                              {
                                  props: {
                                      type: 'primary',
                                      size: 'small',
                                    //   disabled: this.accepterIdList.includes(params.row.id)||params.row.id===this.learnNoteQuery.userId, // 原来禁用判断，下面的采用后台接口返回id 禁用
                                      disabled: !this.shareCanClickList.includes(params.row.id)
                                  },
                                  style: {
                                      'margin-right': '4px',
                                  },
                                  on: {
                                      click: (e) => {
                                        this.accepterName = params.row.username
                                          this.shareNote(params.row.id);
                                      },
                                  },
                              },
                              '分享'
                          ),
                          h(
                              'Poptip',
                              {
                                  props: {
                                      transfer: true,
                                      confirm: true,
                                      title: '确认取消分享?',
                                  },
                                  on: {
                                      'on-ok': (e) => {
                                          this.unShareNote(params.row.id);
                                      },
                                  },
                              },
                              [
                                  h(
                                      'Button',
                                      {
                                          props: {
                                              type: 'primary',
                                              size: 'small',
                                            //   disabled: !this.accepterIdList.includes(
                                            //       params.row.id
                                            //   ),
                                              disabled: this.shareCanClickList.includes(
                                                  params.row.id
                                              ),
                                          },
                                      },
                                      '取消分享'
                                  ),
                              ]
                          ),
                      ]);
                  },
              },
          ],
          tabsOne: true,
          tabsTwo: false,
          shareList: [], //锚定分享数据
          shareQuery: {
              pageIndex: 1,
              pageSize: 10,
              name:''
          },
          videoCol: [
              {
                  title: '用户名',
                  key: 'userName',
              },
              // {
              //   title: "锚定课件名称",
              //   key: "videoName",
              // },
              // {
              //   title: "锚定内容",
              //   key: "content",
              //   render: (h, params) => {
              //     return h("Button", {
              //       props: {
              //         type: "primary",
              //       },
              //       on: {
              //         click: () => {
              //           this.showShare(params)
              //         },
              //       },
              //     }, "查看");
              //   },
              // },
              // {
              //   title: "被分享的锚定人",
              //   key: "accepterUserName",
              // },
              {
                  title: '分享锚定的次数',
                  key: 'count',
                  render: (h, params) => {
                      return h(
                          'a',
                          {
                              on: {
                                  click: () => {
                                      this.showShareDrawer(params);
                                  },
                              },
                          },
                          params.row.dataList.length
                      );
                  },
              },
          ],
          tableLoading: true,
          shareText: '',
          shareModel: false,
          totalShareCount: 0,
          drawerVal: false,
          shareFirstFloor: [],
          sharePanel: '',
          shareSecondPanel: '',
          shareThirdlyPanel: '',
          multipleList: [],
          multipleContent: [],
          noteType:'list',
          shareCanClickList:[],
      };
  },
  computed: {
      ...mapState(['routeList']),
      skillTreeManageShow(){
        let show = false
        for (let i=0;i<this.routeList;i++){ // 判断菜单是否包含技能书，只判断菜单1，2级目录，三级不管了。
          let r = this.routeList[i]
          if((r.name+"").includes('skillTree')){
            return true
          }
          if(r.children && r.children.length>0)
          for (let j=0;j<r.children;j++){
            let rs = r.children[j]
            if((rs.name+"").includes('skillTree')){
              return true
            }
          }
        }
        
        
        
        
        
        //skillTree
        return show
      },
    
    
    
      shareNoteIdList() {
          return this.accepterList.map((role) => role.accepter);
      },
      pageTitle () {
          //当前菜单显示名
          return this.$store.getters.pageTitle;
      }
  },
  filters: {
      medalNumFilter(num) {
          if (num > 10) {
              num = 10;
          }
          switch (num) {
              case 1:
                  return '初级一级';
              case 2:
                  return '初级二级';
              case 3:
                  return '初级三级';
              case 4:
                  return '初级四级';
              case 5:
                  return '中级一级';
              case 6:
                  return '中级二级';
              case 7:
                  return '中级三级';
              case 8:
                  return '高级一级';
              case 9:
                  return '高级二级';
              case 10:
                  return '特级';
              default:
                  return;
          }
      },
      filterTimeStamp(item){
      const content = Base64.decode(item)
      const obj = JSON.parse(content)
      const hour = Math.floor(obj.noteFlag.currentTime / 3600);
      const minute = Math.floor((obj.noteFlag.currentTime - hour * 3600) / 60);
      const second = obj.noteFlag.currentTime - hour * 3600 - minute * 60;
      return `${hour < 10 ? '0' + hour : hour}:${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`;
    }
  },
  methods: {
      // showShare(item){
      //   this.shareText = item.row.content
      //   this.shareModel = true
      // },

    // 分享按钮是否可点
      shareCanClick(){
        let userNotesId = [];
        let accepter = []
         let params = {
            creator: this.currentUserId,
          }
          this.shareMemList.forEach((item)=>{
            accepter.push(item.id)
          })
          if(this.noteType == 'list'){
            this.multipleList.forEach((item) => {
                item.notes.forEach(note => {
                   userNotesId.push( note.id );
                })
            });
          }else if(this.noteType == 'content'){
            this.multipleContent.forEach(item=>{
                userNotesId.push( item.id );
            })
          }
          shareCanClick(params,{userNotesId,accepter}).then(res=>{
            if (res.code == 1) {
                this.shareCanClickList = res.data
            }else{
                this.shareCanClickList = []
            }
          }).catch(error=>{
            this.shareCanClickList = []
          })
      },
        // 内容分享抽屉 清空
        noteShareModalClose(){
            this.multipleContent = []
        },
    //  关闭分享人员抽屉
    closeShareModel() {
        this.noteShareMemInput = ''
        this.noteShareMemUserAccountInput = ''
        if ( this.noteType == 'content' ) {
            this.multipleContent = []
            this.drawer.list.map(item=>{
                this.$set(item, '_checked', false)
            })
        }
    },
     
        // 复选框 勾选 取消   和外面列表有所关联 分享锚定
        checkChangeold(val, checkItem) {
            this.$set(checkItem, '_checked', val);
            if (val) {
                // 数组为空，直接添加一条新记录
                if (this.multipleList.length === 0) {
                    let notes = [];
                    notes.push(checkItem);
                    this.multipleList.push({
                        experimentId: checkItem.experimentId,
                        selectId: checkItem.experimentId,
                        experimentName: checkItem.experimentName,
                        name: checkItem.experimentName,
                        notes: notes
                    });
                    return;
                }

                // 遍历多个记录和其notes
                let foundNote = null;
                for (let i = 0, len = this.multipleList.length; i < len; i++) {
                    let item = this.multipleList[i];
                    if (item.experimentId === checkItem.experimentId) {
                        // 找到相应的记录，添加一条新的notes
                        foundNote = item.notes.find(note => note.id === checkItem.id);
                        if (!foundNote) {
                            item.notes.push(checkItem);
                        }
                        return;
                    }
                }

                // 遍历完所有记录后未找到相应的记录，添加一条新记录
                let notes = [];
                notes.push(checkItem);
                this.multipleList.push({
                    selectId: checkItem.experimentId,
                    experimentId: checkItem.experimentId,
                    experimentName: checkItem.experimentName,
                    name: checkItem.experimentName,
                    notes: notes
                });

            } else if (!val) {
                // 点击取消选中，删除相应的数据
                for (let i = 0, len = this.multipleList.length; i < len; i++) {
                    let item = this.multipleList[i];
                    let index = item.notes.findIndex(note => note.id === checkItem.id);
                    if (index !== -1) {
                        item.notes.splice(index, 1);
                        // 如果notes为空，则删除整个记录
                        if (item.notes.length === 0) {
                            this.multipleList.splice(i, 1);
                            i--;
                            len--;
                        }
                        break;
                    }
                }
            }
        },
        checkChange(val, checkItem){
            this.$set(checkItem, '_checked', val);
            if(val){
               this.multipleContent.push(checkItem) 
            }else{
                // 删除数组中对应的元素
                let index = this.multipleContent.findIndex(item => item.id === checkItem.id);
                this.multipleContent.splice(index, 1);
            }
        },
        filterAnchoringCon(item) {
            const content = Base64.decode(item);
            let noteContent;
            try {
                noteContent = JSON.parse(content).noteContent;
            } catch (err) {
                noteContent = content;
            }
            return noteContent;
        },
       timestampToString(time){
        return timestampToString(time)        
        }, 
        handleShareQuery(){
            this.shareQuery.pageIndex = 1
            this.shareQuery.pageSize = 10
            this.getQuerYanchoringShareList(this.shareQuery)
        },
      handleDrawerClose() {
          this.sharePanel = '';
          this.shareSecondPanel = '';
          this.shareThirdlyPanel = '';
      },
      handleMultiple(item) {
          this.multipleList = item;
      },
      showShareDrawer(item) {
          this.shareFirstFloor = item.row.dataList;
          this.shareFirstFloor.forEach(({notesShareTos = []}) => {
            notesShareTos.forEach(({notes = []}) => {
                notes.forEach(note => {
                    note.showContent = this.filterAnchoringCon(note.content)
                })
            })
          })
          this.drawerVal = true;
      },
      handleShareFirstFloor(item) {
          console.log(item);
      },
      noteShareModal(type) {
          this.noteShareMoal = true;
          this.noteShareMemPage = 1;
          this.noteType = type
          this.queryMember();
          this.queryShareList();
      },
      addSearchComMem(val) {
          this.noteShareMemPage = 1;
          this.noteShareMemInput = this.noteShareMemInput;
          this.noteShareMemUserAccountInput=this.noteShareMemUserAccountInput
          this.queryMember();
      },
      queryShareList() {
          this.accepterIdList = [];
          let paramas = {
              pageIndex: 1,
              pageSize: 9999,
          };
          queryShareList(paramas, this.currentUserId).then((res) => {
              if (res.code == 1) {
                  this.accepterList = res.data.items;
                  this.accepterList.forEach((e) => {
                      this.accepterIdList.push(e.accepter);
                  });
                  console.log(this.accepterIdList, 'this.accepterIdListthis.accepterIdList');
              } else {
                  this.$Message.warning(res.message);
              }
             this.shareCanClick()
          });
      },
      queryMember() {
          let params = {
              pageIndex: this.noteShareMemPage,
              pageSize: this.noteShareMemSize,
              type: 'experimenter',
              order: 'desc',
              sortBy: 'created',
          };
          if (!this.isRootDesigner) {
              params.creator = this.USER_ID;
          }
          if (this.noteShareMemInput != '') {
              params.username = this.noteShareMemInput;
          }
          if (this.noteShareMemUserAccountInput != '') {
              params.nickname = this.noteShareMemUserAccountInput;
          }

          getExperOfCompany(params)
              .then((res) => {
                  if (res.data.code == 1) {
                      let getData = res.data.data;
                      this.noteShareMemTotal = getData.total;

                      let items = getData.items;
                      this.shareMemList = items;
                      this.shareCanClick()
                  }
              })
              .catch((err) => {
                  console.log(err);
              });
      },
      shareNote(id) {
          let dataArr = [];
          if(this.noteType == 'list'){
            this.multipleList.forEach((item) => {
                item.notes.forEach(note => {
                   dataArr.push({
                       creator: this.currentUserId,
                       accepter: id,
                       userNotesId: note.id,
                       shareUserId: this.USER_ID,
                       shareUserName: this.shareUserName,
                       creatorName: this.creatorName,
                       accepterName: this.accepterName
                   });
                })
            });
          }else if(this.noteType == 'content'){
            this.multipleContent.forEach(item=>{
                dataArr.push({
                    creator: this.currentUserId,
                    accepter: id,
                    userNotesId: item.id,
                    shareUserId: this.USER_ID,
                    shareUserName: this.shareUserName,
                    creatorName: this.creatorName,
                    accepterName: this.accepterName
                });
            })
          }
          batchShareNote(dataArr).then((res) => {
              if (res.code == 1) {
                  this.$Message.success(res.message);
                  this.queryShareList();
              } else {
                  this.$Message.warning(res.message);
              }
          });
      },
      unShareNote(id) {
          let ids= []
          var data = this.accepterList.filter((item) => item.accepter == id);
            data.forEach(resItem=>{
                if(this.noteType == 'list'){
                    this.multipleList.forEach(item=>{
                        item.notes.forEach(note=>{
                            if(note.id == resItem.userNotesId){
                                ids.push( resItem.id );
                            }
                        })
                    })
                }else if(this.noteType == 'content'){
                   this.multipleContent.forEach(item=>{
                    if(item.id == resItem.userNotesId){
                        ids.push( resItem.id );
                    }
                }) 
                }
            })
        //   console.log(data);
        //   let ids = data.map(item => item.id);
        //   ids.push(data[0].id);
        //   console.log(ids, 'idsids');
          cancelShareNote(ids).then((res) => {
              if (res.code == 1) {
                  this.$Message.success(res.message);
                  this.queryShareList();
              } else {
                  this.$Message.warning(res.message);
              }
          });
      },
      //类型显示
      setType(val) {
          let text = '';
          if (val.type === 'designer') {
              if (val.role === 'evaluator') {
                  text = '评估人员';
              }
              if (val.role === 'leader') {
                  text = '单位管理员';
              }
              if (val.role === 'member') {
                  text = '单位设计师';
              }
          } else if (val.type === 'experimenter') {
              text = '操作员';
          }
          return text;
      },
      // 是否在线
      isOnline(val) {
          let text = '';
          let color = '';
          let obj = {};
          if (val) {
              text = '是';
              color = '#90EE90';
          } else {
              text = '否';
          }
          obj.text = text;
          obj.color = color;
          return obj;
      },
      noteShareMemChange(val) {
          this.noteShareMemPage = val;
          this.queryMember();
      },
      getMedal(num) {
          if (num > 10) {
              num = 10; // 最高只有十个等级
          }
          switch (num) {
              case 1:
                  return this.medal1;
              case 2:
                  return this.medal2;
              case 3:
                  return this.medal3;
              case 4:
                  return this.medal4;
              case 5:
                  return this.medal5;
              case 6:
                  return this.medal6;
              case 7:
                  return this.medal7;
              case 8:
                  return this.medal8;
              case 9:
                  return this.medal9;
              case 10:
                  return this.medal10;
              default:
                  return;
          }
      },
      // 显示tag的名称
      handleTagName(item) {
          return item.split('_._')[1];
      },
      addAssign() {
          if (this.getAddMemIdArr.length === 0) {
              this.$Message.error({
                  content: '请选择需要添加的成员！',
                  duration: 3,
              });
              return false;
          }
          let arr = [];
          for (let i = 0; i < this.getAddMemIdArr.length; i++) {
              let getID = this.getAddMemIdArr[i].split('_._')[0];
              arr.push(getID);
          }
          this.submitAddMemLoading = true;
          addExcellentStudent(arr)
              .then(({ code, message }) => {
                  if (code === 1) {
                      this.$Message.success('添加成功');
                      this.refreshIcon();
                      this.addDeviceModel = false;
                  } else {
                      this.$Message.warning(message);
                  }
                  this.submitAddMemLoading = false;
              })
              .catch(() => {
                  this.submitAddMemLoading = false;
              });
      },
      // 点击tag
      handleClose2(event, name) {
          if (this.getAddMemIdArr.indexOf(name) > -1) {
              let index = this.getAddMemIdArr.indexOf(name);
              this.getAddMemIdArr.splice(index, 1);
              let id = name.split('_._')[0];
              for (let i = 0; i < this.studentList.length; i++) {
                  if (id === this.studentList[i].userId) {
                      this.$set(this.studentList[i], '_checked', false);
                  }
              }
          }
      },
      // 点击添加一页
      selectAll(val) {
          for (let i = 0; i < this.studentList.length; i++) {
              let IDJoinName = this.studentList[i].userId + '_._' + this.studentList[i].userName;
              this.$set(this.studentList[i], '_checked', true);
              if (
                  this.getAddMemIdArr.indexOf(IDJoinName) <= -1 &&
                  !this.studentList[i]._disabled
              ) {
                  this.getAddMemIdArr.push(IDJoinName);
              }
          }
      },
      // 点击删除一个
      cancelSelectSignal(val, row) {
          let IDJoinName = row.userId + '_._' + row.userName;
          if (this.getAddMemIdArr.indexOf(IDJoinName) > -1) {
              let index = this.getAddMemIdArr.indexOf(IDJoinName);
              this.getAddMemIdArr.splice(index, 1);
              this.modifyCheckStatus(row, false);
          }
      },
      // 点击添加一个
      selectSignal(val, row) {
          let IDJoinName = row.userId + '_._' + row.userName;
          if (this.getAddMemIdArr.indexOf(IDJoinName) <= -1) {
              this.getAddMemIdArr.push(IDJoinName);
              this.modifyCheckStatus(row, true);
          }
      },
      // 点击取消一页
      cancelSelectAll(val) {
          for (let i = 0; i < this.studentList.length; i++) {
              let IDJoinName = this.studentList[i].userId + '_._' + this.studentList[i].userName;
              this.$set(this.studentList[i], '_checked', false);
              if (
                  this.getAddMemIdArr.indexOf(IDJoinName) > -1 &&
                  !this.studentList[i]._disabled
              ) {
                  let index = this.getAddMemIdArr.indexOf(IDJoinName);
                  this.getAddMemIdArr.splice(index, 1);
              }
          }
      },
      // 修改选中状态
      modifyCheckStatus(val, status) {
          for (let i = 0; i < this.studentList.length; i++) {
              if (val.userId === this.studentList[i].userId) {
                  this.$set(this.studentList[i], '_checked', status);
              }
          }
      },
      // 关闭模态框，重置搜索条件
      changeModalStatus(val) {
          if (!val) {
              this.refreshAddGroupList();
          }
      },
      // 重置搜索条件
      refreshAddGroupList() {
          this.studentQuery = {
              pageIndex: 1,
              pageSize: 10,
              userName: '',
              outstanding: false,
          };
          this.getAddMemIdArr = [];
          this.getStudentList();
      },
      // 获取学员列表
      getStudentList(val) {
          if (val) {
              this.studentQuery.pageIndex = val;
          }
          getStudentList(this.studentQuery)
              .then(({ code, message, data = {} }) => {
                  if (code !== 1) {
                      this.$Message.warning(message);
                      this.studentTotal = 0;
                      this.studentList = [];
                      return;
                  }
                  this.studentTotal = data.total;
                  let list = data.items || [];
                  let userIds = this.getAddMemIdArr.map((item) => item.split('_._')[0]);
                  this.studentList = list.map((item) => {
                      item._checked = userIds.includes(item.userId);
                      return item;
                  });
              })
              .catch(() => {
                  this.$Message.error('获取优秀学员列表异常');
                  this.studentTotal = 0;
                  this.studentList = [];
              });
      },
      // 单位内操作员
      showDrawerBtn() {
          this.addDeviceModel = true;
          this.getStudentList();
      },
      handerTimeDiff(time) {
          let timeStr = Moment().diff(Moment(time), 'seconds');
          if (timeStr <= 24 * 60 * 60) {
              let h = parseInt(timeStr / 60 / 60);
              let m = parseInt(timeStr / 60);
              let s = timeStr;
              if (h) {
                  return `${h}小时前`;
              } else if (m) {
                  return `${m}分钟前`;
              } else {
                  return `${s}秒前`;
              }
          } else {
              return time;
          }
      },
      onEditorFocus(event) {
          //显示区禁止编辑
          event.enable(false);
      },
      showNotes(row) {
        // 拷贝一份 row
        this.drawer.list = []
        let { name, notes } = JSON.parse(JSON.stringify(row));
        this.drawer.show = true;
        this.drawer.title = name;
        this.drawer.list = notes.filter((item) => {
            if (item.type === 2) {
                let content = JSON.parse(Base64.decode(item.content));
                item.content = content.noteContent;
                item.noteFlag = content.noteFlag;
                item._checked = [item.id].includes(this.setChecked(item.id)) // 已经选中的, 给复选框加一个标识
                item._disabled = [item.id].includes(this.setChecked(item.id)) // 已经选中的, 给复选框禁用
                return true;
            } else {
                return false;
            }
        });
      },
      setChecked(id){
        let foundNote = null;
        this.multipleList.forEach((item) => {
            foundNote = item.notes.find(note => note.id === id);
            if (foundNote) {
            return foundNote.id;
          }
        });
        return foundNote ? foundNote.id : null;
      },
      showDrawer(item) {
          this.drawerTitle = `${item.userName}-学习详情`;
          this.drawerUserId = item.userId;
          this.$refs.integralDetail.show();
      },
      showAnchorModal(item, type) {
          let { userName, userId } = item;
          this.creatorName = userName
          this.learnNoteModal.show = true;
          this.currentType = type;
          this.currentUserId = userId;
          this.learnNoteModal.title =
              type === 3
                  ? `${userName}-锚定内容`
                  : type === 1
                  ? `${userName}-积分总分`
                  : `${userName}-用户勋章`;
          this.learnNoteQuery.pageIndex = 1;
          this.learnNoteQuery.creator = userId;
          this.learnNoteQuery.userId = userId
        //   {
        //       pageIndex: 1,
        //       pageSize: 10,
        //       creator: userId,
        //       userId,
        //   };
          if (type === 1) {
              this.getIntegralList(true);
          } else if (type === 2) {
              this.getMedalList(userId);
          } else {
              this.getLearnNoteList(true);
          }
      },
      getMedalList(userId) {
          this.learnNoteModal.total = 0;
          this.learnNoteModal.list = [];
          getMedalList(userId)
              .then(({ code, message, data }) => {
                  if (code !== 1) {
                      this.$Message.warning(message);
                      return;
                  }
                  this.learnNoteModal.total = data.total;
                  this.learnNoteModal.list = data.items || [];
              })
              .catch(() => {
                  this.$Message.error('查询学员积分总分异常');
              });
      },
      getIntegralList(isFrist) {
          if (isFrist) {
              // 初次打开抽屉，数据全部清空
              this.learnNoteModal.total = 0;
              this.learnNoteModal.list = [];
          }
          getIntegralList(this.learnNoteQuery)
              .then(({ code, message, data }) => {
                  if (code !== 1) {
                      this.$Message.warning(message);
                      return;
                  }
                  this.learnNoteModal.total = data.total;
                  this.learnNoteModal.list = data.items || [];
                  this.learnNoteModal.columns = [
                        {
                            type:'selection',
                            width:60,
                        },
                      {
                          placement:'top-left',
                          title: '名称',
                          key: 'name',
                          width: 500,
                          tooltip: true,
                      },
                      {
                          title: '创建时间',
                          key: 'created',
                          width: 170,
                          tooltip: true,
                      },
                      {
                          title: '得分类型',
                          key: 'dataType',
                          width: 80,
                          render: (h, params) => {
                              return h('span', this.dataTypeFilter(params.row.dataType));
                          },
                      },
                      {
                          title: '分数类型',
                          key: 'scoreType',
                          width: 80,
                          render: (h, params) => {
                              return h('span', params.row.scoreType === 1 ? '奖励分' : '基础分');
                          },
                      },
                      {
                          title: '得分',
                          key: 'score',
                          tooltip: true,
                          width: 80,
                      },
                  ];
              })
              .catch(() => {
                  this.$Message.error('查询学员积分总分异常');
              });
      },
      dataTypeFilter(dataType) {
          switch (String(dataType)) {
              case '0':
                  return '课程';
              case '1':
                  return '课件';
              case '2':
                  return '视频';
              case '3':
                  return '考试';
              case '4':
                  return '场景';
              case '5':
                  return '技能树节点';
              case '6':
                  return '技能树';
              default:
                  return '';
          }
      },
      getLearnNoteList(isFrist) {
          if (isFrist) {
              // 初次打开抽屉，数据全部清空
              this.learnNoteModal.total = 0;
              this.learnNoteModal.list = [];
          }
          getLearnNoteList(this.learnNoteQuery)
              .then(({ code, message, data }) => {
                  if (code !== 1) {
                      this.$Message.warning(message);
                      return;
                  }
                  this.learnNoteModal.total = data.total;
                  this.learnNoteModal.list = (data.items || []).map((item) => {
                      item.name = item.experimentName || item.videoName || item.courseName;
                      item.selectId =  item.experimentId || item.videoId || item.courseId;
                      return item;
                  });
                  this.learnNoteModal.columns = [
                        {
                            type:'selection',
                            width:60,
                        },
                      {
                          placement:'top-left',
                          title: '课件名称',
                          key: 'name',
                          tooltip: true,
                          width: 550,
                      },
                      {
                          title: '操作',
                          key: 'action',
                          render: (h, params) => {
                              return h(
                                  'Button',
                                  {
                                      props: {
                                          type: 'info',
                                          size: 'small',
                                      },
                                      on: {
                                          click: () => {
                                              this.showNotes(params.row);
                                          },
                                      },
                                  },
                                  '查询锚定'
                              );
                          },
                      },
                  ];
              })
              .catch(() => {
                  this.$Message.error('查询学员有锚定的课件异常');
              });
      },
      // 设置高度
      setStyle() {
          window.fullHeight = document.documentElement.clientHeight;
          window.fullWidth = document.documentElement.clientWidth;
          this.fullHeight = window.fullHeight;
          this.fullWidth = window.fullWidth;
          this.setTableHei = this.fullHeight - 197;
          this.query.pageSize = Math.floor(this.setTableHei / 96) || 1;
      },
      getDataList(isFirstEnter) {
          if (isFirstEnter) {
              this.showDataList = false;
              this.showDefImg = true;
          }
          clearTimeout(this.timer);
          this.queryTerms.outstanding = true; // 查询优秀学员
          getStudentList(Object.assign(this.queryTerms, this.query))
              .then(({ code, message, data = {} }) => {
                  if (code !== 1) {
                      this.$Message.warning(message);
                      this.showDataList = false;
                      this.showDefImg = true;
                      return;
                  }
                  this.totalCount = data.total;
                  this.dataList = data.items || [];
                  if (data.items.length > 0) {
                      this.showDataList = true;
                      this.showDefImg = false;
                  } else {
                      this.showDataList = false;
                      this.showDefImg = true;
                  }
              })
              .catch(() => {
                  this.$Message.error('获取优秀学员列表异常');
                  this.showDataList = false;
                  this.showDefImg = true;
              })
              .finally(() => {
                  this.timer = setTimeout(() => {
                      this.getDataList();
                  }, 10000);
              });
      },
      addByExcellentUser(item) {
          addByExcellentUser(item.userId).then(({ code, message, data = {} }) => {
              if (code == 1) {
                  this.$Message.info('生成技能树成功');
                  this.$refs.treeDetail.open({
                      id: data.careerSkillId,
                      name: data.name,
                  });
              } else {
                  this.$Message.warning(message);
              }
          });
      },
      deleteExcellentStudent(item) {
          deleteExcellentStudent(item.userId).then((data) => {
              if (data.code == 1) {
                  this.$Message.info('删除成功');
                  if (this.query.pageIndex > 1 && this.dataList.length === 1) {
                      this.query.pageIndex -= 1;
                  }
                  this.getDataList();
              } else {
                  this.$Message.warning(data.message);
              }
          });
      },
      changeModalPage(page) {
          this.learnNoteQuery.pageIndex = page;
          let type = this.currentType;
          if (type === 1) {
              this.getIntegralList();
          } else if (type === 2) {
              this.getMedalList(this.currentUserId);
          } else {
              this.getLearnNoteList();
          }
      },
      changeModalSize(size) {
          this.learnNoteQuery.pageSize = size;
          let type = this.currentType;
          if (type === 1) {
              this.getIntegralList();
          } else if (type === 2) {
              this.getMedalList(this.currentUserId);
          } else {
              this.getLearnNoteList();
          }
      },
      changePage(page) {
          this.query.pageIndex = page;
          this.getDataList();
      },
      changeSize(size) {
          this.query.pageSize = size;
          this.getDataList();
      },

      changeSharePage(page) {
          this.shareQuery.pageIndex = page;
          this.getQuerYanchoringShareList(this.shareQuery);
      },
      changShareSize(size) {
          this.shareQuery.pageSize = size;
          this.getQuerYanchoringShareList(this.shareQuery);
      },

      refreshIcon() {
          this.query = {
              pageIndex: 1,
              pageSize: 10,
          };
          this.queryTerms = {};
          this.setStyle();
          this.getDataList();
      },
      cancelLoading(name) {
          this[name].loading = false;
          setTimeout(() => {
              this[name].loading = true;
          });
      },
      cancel(name) {
          this.$refs[name].resetFields();
          this.formValidate = {
              creator: this.USER_ID,
              name: '', //CVE编号
              useType: '', //事件描述
              eventType: '',
              file: {}, //镜像名称
              description: '', //可见范围
          };
      },
      // 设置知否可点击
      setIsClick(item) {
          return item.creator !== this.USER_ID && !this.isRootDesigner;
      },
      setDelImgSrc(item) {
          if (item.creator !== this.USER_ID && !this.isRootDesigner) {
              return require('../../assets/project/delNote-d.png');
          } else {
              return require('../../assets/project/delNote-h.png');
          }
      },
      learnNoteCLose(){
          this.multipleList=[]
      },
      // 技能树分享
      openShareModal(info, type) {
          this.shareModal.type = type;
          this.shareModal.userId = info.userId;
          this.shareModal.show = true;
      },
      async getQuerYanchoringShareList(obj) {
          try {
              const res = await querYanchoringShareList(obj);
              if (res.code == 0) {
                  this.$Message.error(res.message);
                  this.tableLoading = false;
              } else {
                  this.shareList = res.data.items;
                  this.totalShareCount = res.data.total;
                  this.tableLoading = false;
              }
          } catch (error) {
              console.log(error);
          }
      },
      //切换
      async handleSwitch(item) {
          if (item === 'one') {
              this.tabsOne = true;
              this.tabsTwo = false;
              this.shareQuery.name = ''
              this.refreshIcon()
          } else {
              this.tabsTwo = true;
              this.tabsOne = false;
              this.queryTerms.userName = ''
              this.queryTerms.userAccount = ''
              this.getQuerYanchoringShareList(this.shareQuery);
          }
      },

      convertData(res) {
          let data = [];
          res.forEach((item) => {
              item.notesShareTos.forEach((note) => {
                  note.notes.forEach((n) => {
                      data.push({
                          userName: item.userName,
                          videoName: note.videoName,
                          content: n.content,
                          accepterUserName: item.accepterUserName,
                          shareCount: note.shareCount,
                      });
                  });
              });
          });
          return data;
      },
  },
  mounted() {
    
    
    //   this.setStyle();
    //   window.onresize = () => {
    //       this.setStyle();
    //   };
      this.getDataList(true);
  },
  watch: {},
  beforeDestroy() {
      clearTimeout(this.timer);
  },
};
</script>

<style scoped>
.newClass /deep/ .ivu-collapse-item  .ivu-collapse-content{
  max-height: 500px;
  overflow: auto;
}
.anchoring-tit{
  display: flex;
  justify-content: space-between;
}
.table-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*margin-top: 15px;*/
  padding: 15px 10px 10px 19px;
  /* border-left: 1px solid #e8eaec;
  border-bottom: 1px solid #e8eaec;
  border-right: 1px solid #e8eaec; */
}
.tag-wrap-div {
  max-height: 100px;
  margin-bottom: 15px;
  margin-top: 10px;
  overflow-y: auto;
}
.deviceDrawer /deep/ #cardList {
  max-height: calc(100% - 52px) !important;
  margin-bottom: 20px;
}
.deviceDrawer /deep/ #cardList .defGraphWrap {
  max-height: calc(100vh - 140px) !important;
}

.noteList {
  flex-grow: 1;
  overflow-y: auto;
  max-height: calc(100% - 96px);
  margin-top: 16px;
}
.noteList ul {
  padding: 10px;
  list-style: none;
}
.noteList h4 {
  color: #aaa;
}
.editorDiv2 {
  width: 100%;
  height: 300px;
  max-height: 300px;
}
.editorDiv2 >>> .ql-container.ql-snow {
  height: calc(100% - 22px);
}
.editorDiv2 >>> .ql-toolbar.ql-snow,
.editorDiv >>> .ql-toolbar.ql-snow {
  display: flex;
  align-items: center;
}
.editorDiv2 >>> .ql-snow.ql-toolbar button,
.editorDiv >>> .ql-snow.ql-toolbar button {
  display: flex;
  align-items: center;
}
.editorDiv2 >>> .ql-snow .ql-formats,
.editorDiv >>> .ql-snow .ql-formats {
  display: block;
}
.noteList .quill-editor.editorShow {
  height: auto;
}
.noteList ul li {
  margin-bottom: 14px;
  color: #18191c;
  display: flex;
  flex-direction: column;
}
.noteList .timestamp {
  border-radius: 5px;
  padding: 0 5px;
  background: #f6f7f8;
  color: #18191c;
  cursor: pointer;
}
.noteList ul li .showArea,
.noteList ul li .oprateArea {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 5px 0;
}
.noteList ul li .showArea > section {
  display: flex;
  align-items: center;
}
.noteList ul li .showArea > section > img {
  width: 20px;
  max-width: 20px;
  min-width: 20px;
  height: auto;
  margin-right: 8px;
}
.noteList ul li:last-of-type {
  margin-bottom: 0;
}
/* 时间戳样式 */
.editor /deep/ .timestamp-embed {
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 0px 20px;
}
.editor /deep/ .timestamp-embed div {
  cursor: pointer;
  transition: 0.2s;
  background: #f6f7f8;
  border-radius: 4px;
  height: auto;
  line-height: 20px;
  display: inline-block;
  padding: 3.5px 10px 3.5px 5px;
  font-size: 14px;
  font-weight: 700;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  grid-gap: 4px;
  gap: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.editor /deep/ .timestamp-embed div .ivu-icon-md-flag {
  font-size: 16px;
  font-style: normal;
}
.editor /deep/ .timestamp-embed div:hover {
  border: 1px solid black;
}
.editor /deep/ .timestamp-embed .time-tag-item {
  font-size: 14px;
  line-height: 20px;
  color: #18191c;
  font-weight: 400;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}
.achorTitle {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}
.act {
  font-weight: 700;
  font-size: 18px !important;
}
.tabs {
  cursor: pointer;
  font-size: 14px;
}
.tab-title-estu{
  width: 192px;
  justify-content: space-between;
  display: flex;
  line-height: 28px;
}
</style>
